import React, { useEffect, useState } from 'react'
import { Button, Col, Form, Input, Popconfirm, Row, Table } from 'antd'
import { Pager, PageRecord, UserPermission } from '../../../server/interface'
import { api_permission } from '../../apis'
import { ColumnsType } from 'antd/es/table'
import { PermModal } from './modal'

const PermList = () => {
    const [loading, setLoading] = useState(false)
    const [res, setRes] = useState<Pager<UserPermission> | undefined>(undefined)
    const [form] = Form.useForm()
    const [pager, setPager] = useState<PageRecord>({ page: 1, pageSize: 10 })
    const [formData, setFormData] = useState<Partial<UserPermission>>({})

    const doSearch = async () => {
        setLoading(true)
        const res = await api_permission.list({
            ...pager,
            params: formData,
        })
        setLoading(false)
        if (res.success) {
            setRes(res.data)
        }
    }

    useEffect(() => {
        doSearch()
    }, [pager])

    useEffect(() => {
        setPager({ ...pager, page: 1 })
    }, [formData])

    const columns: ColumnsType<UserPermission> = [
        {
            title: '序号',
            dataIndex: 'id',
            render: (_, __, index) => (pager.page - 1) * pager.pageSize + index + 1,
        },
        {
            title: '权限ID',
            dataIndex: 'key',
        },
        {
            title: '权限名称',
            dataIndex: 'name',
        },
        {
            title: '权限描述',
            dataIndex: 'desc',
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (_, u) => <>
                <Popconfirm title="确认删除权限？ " onConfirm={async () => {
                    const res = await api_permission.delete([u.key])
                    if (res.success) {
                        doSearch()
                    }
                }}><Button type="link" disabled={u.readonly} title={u.readonly ? '系统内置不可删除' : undefined}>删除</Button></Popconfirm>
                <PermModal buttonProps={{ type: 'link' }} perm={u} onOk={doSearch}/>
            </>
        }
    ]
    return <>
        <Row style={{ marginBottom: 10 }}>
            <Col span={20}>
                <Form
                    form={form}
                    layout="inline"
                    onFinish={setFormData}
                >
                    <Form.Item name="key" label="权限ID">
                        <Input allowClear />
                    </Form.Item>
                    <Form.Item name="name" label="权限名称">
                        <Input allowClear />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">查询</Button>
                    </Form.Item>
                </Form>
            </Col>
            <Col span={4} style={{ textAlign: 'right' }}>
                <PermModal buttonProps={{ type: 'primary' }} onOk={() => setPager({ ...pager, page: 1 })} />
            </Col>
        </Row>
        <Table
            rowKey="key"
            size="small"
            loading={loading}
            columns={columns}
            dataSource={res?.list || []}
            pagination={{
                ...pager,
                total: res?.total || 0,
                showTotal: () => `共 ${res?.total || 0} 条数据`,
                showSizeChanger: true,
                onChange(page, pageSize) {
                    setPager({page, pageSize})
                },
            }}
        />
    </>
}

export default PermList